<template>
    <div class="container">
        <div class="containerEart">
            <p class="dialogTitle">房屋地震灾害风险评估</p>
            <div class="header">
                <span class="title">震情趋势：</span>
                <div class="icon">
              <svg-icon class-name="error-icon" icon-class="error" style="margin-right:10px" v-if="showIcon"/><span>{{titleOption}}</span>
                 </div>
            </div>
            <div class="header">
                <span class="title">评估内容</span>
                <div>
                    <el-radio-group v-model="sdaAssSeiIntensity">
                        <el-radio label="房屋抗震能力评估">房屋抗震能力评估</el-radio>
                        <el-radio label="房屋破坏评估">房屋破坏评估</el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" @click="handleAssess">
                    <svg-icon class-name="assess-icon" icon-class="assess" /><span style="margin-left:10px">评估</span>
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" @click="openUpload" :disabled="!sdaAssSeiIntensity">
                    <svg-icon class-name="upload-icon" icon-class="upload" /><span style="margin-left:10px">成果上传</span>
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" @click="handleDownload">
                    <svg-icon class-name="download-icon" icon-class="download" /><span
                        style="margin-left:10px">批量下载</span>
                </el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button type="primary" @click="handleSubmit">
                    <svg-icon class-name="submit-icon" icon-class="submit" /><span style="margin-left:10px">提交</span>
                </el-button>
            </el-col> -->
        </el-row>

        <el-table v-loading="loading" :data="dataList" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="评估内容" align="center" prop="sdaAssSeiIntensity" />
            <el-table-column label="生成时间" align="center" prop="sdaAssDate" />
            <el-table-column label="业务人员" align="center" prop="sdaAssPeople" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="text" @click="handleDetil(scope.row)">查看</el-button>
                    <el-button type="text" @click="handledel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 上传对话框 -->
        <el-dialog v-model="open" width="800px" :title="title">
            <p></p>
            <el-form ref="uploadRef" :model="queryParams" :rules="rules" label-width="150px">
                <template v-if="sdaAssSeiIntensity.substring(0,4) =='房屋破坏'">
                    <el-form-item label="地震烈度" prop="intensity">
                        <el-radio-group v-model="queryParams.intensity">
                            <el-radio label="6度">6度</el-radio>
                            <el-radio label="7度">7度</el-radio>
                            <el-radio label="8度">8度</el-radio>
                            <el-radio label="9度">9度</el-radio>
                            <el-radio label="10度">10度</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </template>
                <el-form-item label="图片" prop="sdaAssFileId">
                    <image-upload ref="imageUpload" :limit="limit" v-model="queryParams.attach" />
                </el-form-item>
                <el-form-item label="标题" prop="sdaAssFileTitel">
                    <el-input v-model="queryParams.sdaAssFileTitel" placeholder="请输入标题" />
                </el-form-item>
                <el-form-item label="描述" prop="sdaAssFileDescribe">
                    <el-input v-model="queryParams.sdaAssFileDescribe" type="textarea" maxlength="300" show-word-limit
                        :autosize="{ minRows: 3, maxRows: 5}" placeholder="请输入描述" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleUpload">确定</el-button>
                    <el-button @click="cancelUpload">取消</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 商会对话框 -->
        <el-dialog v-model="showOption" width="400px" title="震情趋势" :close-on-click-modal="false">
        <p class="worrning">震情趋势已发生变化，请注意！</p>
        <el-radio v-model="radioOption" label="true" style="margin-left:10px">今日不再提醒</el-radio>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" :disabled="!radioOption" @click="ok">确定</el-button>
            <el-button @click="cancelOption">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
</template>
<script setup name="house">
import { listHouse, getHouse, uploadHouse, updateHouse, delHouse } from "@/api/assess/house";
import { setcookieTimeFun, getCookieFun } from "@/utils/popout"

const { proxy } = getCurrentInstance();
const route = useRoute();
const showIcon = ref(false);
const titleOption = ref();
const loading = ref(false);
const showOption = ref(false);
const open = ref(false);
const radioOption = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const id = ref();
const limit = ref(1)
const isViewFile = ref(false);
const sdaAssSeiIntensity = ref();
const sdaRelation = ref();
const data = reactive({
    queryParams: {
        intensity: '',
        sdaAssFileId: '',
        attach: [],
        sdaAssFileTitel: '',
        sdaAssFileDescribe: '',
    },
    dataList: [],
    rules: {
        intensity: [{ required: true, message: "烈度不能为空", trigger: "blur" }],
        sdaAssFileId: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        sdaAssFileTitel: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        sdaAssFileDescribe: [{ required: true, message: "描述不能为空", trigger: "blur" }],
    }
})
const { queryParams, dataList, rules } = toRefs(data)

/** 多选框选中数据 */
function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 获取列表操作 */
function getList() {
    sdaRelation.value = route.query.id
    id.value = route.query.id;
    // id.value = '123';
    // sdaRelation.value = '123';
    loading.value = true;
    listHouse(id.value).then((response) => {
        dataList.value = response.data.entities;
        titleOption.value = response.data.bdOpinion;
        showIcon.value = Boolean(Number(response.data.bdOpinionStatus));  
        loading.value = false;
        sdaAssSeiIntensity.value = '';
    });
}
// 打开成果上传开关
function openUpload() {
    reset();
    isViewFile.value = false;
    title.value = "上传"
    open.value = true;
}

// 重置上传
function reset() {
    queryParams.value = {
        intensity: '',
        sdaAssFileId: '',
        attach: [],
        sdaAssFileTitel: '',
        sdaAssFileDescribe: '',
    }
    proxy.resetForm("uploadRef");
}

// 成果上传
function handleUpload() {
    console.log(proxy.$refs["imageUpload"].fileList)
    const fileList = JSON.parse(JSON.stringify(proxy.$refs["imageUpload"].fileList));
    const attachIds = [];
    for (var i = 0; i < fileList.length; i++) {
        attachIds.push(fileList[i].attachId)
    }
    queryParams.value.sdaAssFileId = attachIds.join(",");
    proxy.$refs["uploadRef"].validate(valid => {
        if (valid) {
            if (title.value == '上传') {
                let flag = false;
                if(dataList.value.length==0){
                    flag = false;
                }else{
                // 查看是否重复
                flag = dataList.value.some(item => {
                    console.log(item.sdaAssSeiIntensity.split('-')[1]);
                    if (item.sdaAssSeiIntensity.split('-')[1] == undefined && item.sdaAssSeiIntensity == '抗震能力分布图') {
                        return false
                    } else if (item.sdaAssSeiIntensity.split('-')[1] != undefined && item.sdaAssSeiIntensity.split('-')[1] == queryParams.value.intensity) {
                        return true
                    }
                });
                }
                if (queryParams.value.intensity != undefined) {
                    sdaAssSeiIntensity.value = queryParams.value.intensity;
                }
                flag ? updateUpload() : upload();
            } else if (title.value == '查看') {
                let flag = false;
                if (sdaAssSeiIntensity.value.split('-')[1] == queryParams.value.intensity||dataList.value.length==0) {
                    flag = false
                } else {
                    // 查看是否重复
                    flag = dataList.value.some(item => {
                        if (item.sdaAssSeiIntensity.split('-')[1] == undefined && item.sdaAssSeiIntensity == '抗震能力分布图') {
                            return false
                        } else if (item.sdaAssSeiIntensity.split('-')[1] != undefined && item.sdaAssSeiIntensity.split('-')[1] == queryParams.value.intensity) {
                            return true
                        }
                    });
                }
                if (queryParams.value.intensity != undefined) {
                    sdaAssSeiIntensity.value = queryParams.value.intensity;
                }
                flag ? updateUpdate() : update();
            }
        }
    });
}
// 修改及覆盖方法
function update() {
    updateHouse({ ...queryParams.value, sdaAssSeiIntensity: sdaAssSeiIntensity.value, sdaRelation: sdaRelation.value }).then(response => {
        proxy.$modal.msgSuccess("保存成功");
        open.value = false;
        getList();
    }).catch(() => { });
}
// 是否覆盖
function updateUpdate() {
    proxy.$modal.confirm('是否确认覆盖房屋地震灾害风险评估内容为"' + sdaAssSeiIntensity.value + '"的数据项？').then(function () {
        return updateHouse({ ...queryParams.value, sdaAssSeiIntensity: sdaAssSeiIntensity.value, sdaRelation: sdaRelation.value });
    }).then(() => {
        proxy.$modal.msgSuccess("保存成功");
        open.value = false;
        getList();
    }).catch(() => { });
}
// 上传及覆盖方法
function upload() {
    console.log('上传');
    uploadHouse({ ...queryParams.value, sdaAssSeiIntensity: sdaAssSeiIntensity.value, sdaRelation: sdaRelation.value }).then(response => {
        proxy.$modal.msgSuccess("上传成功");
        open.value = false;
        getList();
    }).catch(() => { });
}
// 是否覆盖
function updateUpload() {
    proxy.$modal.confirm('是否确认覆盖房屋地震灾害风险评估内容为"' + sdaAssSeiIntensity.value + '"的数据项？').then(function () {
        return uploadHouse({ ...queryParams.value, sdaAssSeiIntensity: sdaAssSeiIntensity.value, sdaRelation: sdaRelation.value });
    }).then(() => {
        proxy.$modal.msgSuccess("上传成功");
        open.value = false;
        getList();
    }).catch(() => { });
}

function getDetail(id) {
    getHouse(id).then(response => {
        queryParams.value = response.data.disasterAssEntity;
        sdaAssSeiIntensity.value = response.data.disasterAssEntity.sdaAssSeiIntensity;
        queryParams.value.intensity = sdaAssSeiIntensity.value.split('-')[1];
        queryParams.value.attach = response.data.attach?[response.data.attach]:[];
        title.value = "查看"
        open.value = true;
    })
}

/** 查看方法*/
function handleDetil(row) {
    title.value = '查看';
    reset();
    getDetail(row.sdaId)
}

// 取消成果上传
function cancelUpload() {
    open.value = false;
}

/** 删除按钮操作 */
function handledel(row) {
    const id = row.sdaId;
    proxy.$modal.confirm('是否确认删除' + row.sdaAssSeiIntensity + '的数据项？').then(function () {
        return delHouse(id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

// 评估
function handleAssess() {

}

// 下载
function handleDownload() {

}

// 提交
function handleSubmit() {

}

// 监听单选按钮
watch(showIcon, (val) => {
  console.log(val);
  showOption.value = val;
  if(showOption.value){
    getTimeSetCookieFun(`houseCookie${route.query.id}`)
  }
})

// 获取日期时间
function getTimeSetCookieFun(name) {
  var day = getCookieFun(name) == '' ? '' : getCookieFun(name);
  if (day == '') {
    // console.log('没有cookie,说明过期或者还没有存')
    showOption.value = true;
  } else {
    var newTime = new Date().getDate();
    if (newTime > day) {
      // console.log('我是新的一天,我要弹窗')
      showOption.value = true;
    } else {
      showOption.value = false;
    }
  }
}
// 取消商会意见
function cancelOption() {
  showOption.value = false;
}
// // 确认不再提示
function ok() {
  var newTime = new Date().getDate();
  setcookieTimeFun(`houseCookie${route.query.id}`, newTime, 1)
  showOption.value = false;
}

getList();
</script>
<style lang="scss" scoped>
.container {
    margin: 0px auto;
    height: 100%;
    width: 1200px;
    overflow-x: hidden;
    overflow-y: auto;

    .worrning {
        width: 340px;
        height: 110px;
        color: #3d4a5d;
        font-size: 18px;
        line-height: 26px;
        background: #f5f9fe;
        margin: 30px auto 10px;
        padding: 15px;
    }

    .header {
        padding: 10px 0px;

        .title {
            font-size: 18px;
            font-weight: bold;
        }

        div {
            height: 60px;
            line-height: 60px;
            margin-top: 10px;

            &.icon {
                padding: 0 20px;
                background: #f5f9fe;
            }
        }
    }
}
</style>
  